A range chart with a median value

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var data = [10],
            range_upper = [],
            range_lower = [];

        //
        // Create some data
        //
        for (var i=1,last=10; i<240; i+=1) {
            
            var num = Number(last) + RGraph.random(-2,2);
            num = Math.max(num, 0);
            num = Math.min(num, 20);

            last = num;
            data.push(num);

            range_lower[i] = data[i] - 5;
            range_lower[i] = Math.max(range_lower[i], 0);
            range_upper[i] = data[i] + 5;
        }



        var line = new RGraph.Line({
            id: 'cvs',
            data: [
                range_upper,
                range_lower
            ],
            options: {
                filled: true,
                filledRange: true,
                fillstyle: 'rgba(0,132,0,0.25)',
                colors: ['rgba(0,0,0,0)'],
                backgroundGridAutofitNumvlines: 11,
                tickmarks: null,
                gutterBottom: 50,
                numxticks: 11,
                noxaxis: true,
                textAccessible: true
            }
        }).draw();



        var line2 = new RGraph.Line({
            id: 'cvs',
            data: data,
            options: {
                colors: ['#00830B'],
                backgroundGrid: false,
                noaxes: true,
                ylabels: false,
                gutterBottom: 50,
                tickmarks: null,
                ymax: line.max,
                shadow: false,
                linewidth: 2,
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                textAccessible: true
            }
        }).draw();
    };
</script>